<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>黑马旅游</title>

  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
  <link rel="stylesheet" href="./css/index.css"/>
  <link rel="stylesheet" href="./css/banner.css"/>
</head>

<body>
<div id="app" @click="showOps=false">
  <div style="width: 70%;text-align: center;margin: auto;">
    <div class="banner">
      <div class="logo">
        <img src="./img/heima.png" alt="1"/>
        <span>
          <div class="logo-ch">黑马旅游</div>
          <div class="logo-en">www.itheima.com</div>
        </span>
      </div>
      <div >
        <input type="checkbox" id="toggle-button" v-model="isTest">
        <!--label中的for跟input的id绑定。作用是在点击label时选中input或者取消选中input-->
        <label for="toggle-button" class="button-label">
          <span class="circle"></span>
          <span class="text on">测试</span>
          <span class="text off">正式</span>
        </label>
      </div>
    </div>
    <!--关键字搜索-->
    <div class="search-bar">
      <div class="input-box">
        <input title="输入关键字搜索酒店" v-model="params.key" type="text" @click.stop="" @focus="showOps=true"
               @keyup="handleKeyUp($event)">
        <button @click="handleSearch">搜索</button>
      </div>
      <div id="complete-box" v-show="showOps && ops.length > 0">
        <div v-for="(item, i) in ops" :key="i" @click="handleSearch" @mouseover="opsIndex = i"
             :style='{"background-color": opsIndex===i ? "#EEE" : "#fff"}'>{{item}}
        </div>
      </div>
    </div>
    <!-- 已选择过滤项 -->
    <div class="selected-ops">
      <div class="open">全部结果：</div>
      <div class="selected-op" v-for="(v, k) in params.filters" :key="k" @click="deleteFilter(k)">
        {{filterNames[k]}}：<span>{{v}} <span class='close'>×</span></span>
      </div>
    </div>
    <!--过滤项-->
    <div class="filter-list">
      <div v-for="(v, k) in remainFilter" :key="k">
        <div class="filter-box">
          <div class="f-key"><strong>{{filterNames[k]}}</strong></div>
          <div class="column-divider"></div>
          <div class="f-items">
            <div class="f-item" @click="clickFilter(k, o)" v-for="(o, j) in v" :key="j"><a href="javascript:void(0)">
              {{o}}</a></div>
          </div>
        </div>
        <div class="row-divider"></div>
      </div>
      <div class="filter-box">
        <div class="f-key"><strong>价格</strong></div>
        <div class="column-divider"></div>
        <div class="f-items">
          <div class="f-item" @click="clickFilter('price','0-100')"><a href="javascript:void(0)">100元以下</a></div>
          <div class="f-item" @click="clickFilter('price','100-300')"><a href="javascript:void(0)">100-300元</a></div>
          <div class="f-item" @click="clickFilter('price','300-600')"><a href="javascript:void(0)">300-600元</a></div>
          <div class="f-item" @click="clickFilter('price','600-1500')"><a href="javascript:void(0)">600-1500元</a></div>
          <div class="f-item" @click="clickFilter('price','1500-0')"><a href="javascript:void(0)">1500元以上</a></div>
        </div>
      </div>
    </div>
    <!-- 排序 -->
    <div class="top-ban">
      <!--排序条件-->
      <div class="sort-items">
        <div class="sort-item" v-for="(item, i) in sortItems" :key="i">
          <a :class="{selected: params.sortBy===item.key}" @click="params.sortBy=item.key"
             href="javascript:void(0)">{{item.text}}</a>
          |
        </div>
      </div>

      <!--分页条-->
      <div class="top-pagination">
        <span>共 <i style="color: #222;">{{total}}</i> 家酒店</span>
        <span><i style="color: red;">{{params.page}}</i>/{{totalPage}}</span>
        <a class="btn-arrow" href="#" style="display: inline-block" @click="prePage">&lt;</a>
        <a class="btn-arrow" href="#" style="display: inline-block" @click="nextPage">&gt;</a>
      </div>
    </div>
    <div class="row-divider" style="margin-bottom: 5px; width: 100%"></div>
    <!--酒店列表-->
    <div style="display: flex; justify-content: space-between;">

      <div class="hotel-list">
        <div class="hotel-box" v-for="(hotel,i) in hotels" :key="i"
             style="display: flex;justify-content: space-between;" @mouseover="handleMarkerFocus(hotel)">
          <div class="ad-mark" v-if="hotel.isAD">
            <img src="./img/ad.png" width="25"/>
          </div>
          <div style="width: 0;"></div>
          <div style="width: 25%"><img width="100%" :src="hotel.pic"></div>
          <div class="hotel-info">
            <div class="hotel-name" v-html="hotel.name">
            </div>
            <div class="star-name"> {{hotel.starName}}</div>
            <div class="address">
              位于 <span style="color: #BC8516;">{{hotel.business}}</span> 周边，{{hotel.address}}
            </div>
            <div class="order"> 1分钟前有人预订了该酒店</div>
            <div v-if="hotel.distance" class="address">距离您 {{hotel.distance.toFixed(2)}} km</div>
          </div>
          <div style="text-align: left; width: 15%;">
            <div>
              <b style="color: #f60;">￥</b> <span id='hotel-price'>{{hotel.price}}</span> <span
                style="font-size: 0.2em; color: #999;">起</span>
            </div>
            <div class='btn'>立即预定</div>
            <div>
              <span class="hotel-score">{{hotel.score / 10}}分</span> /<span>5分</span>
            </div>
          </div>
        </div>
      </div>
      <div :class='{"map-box": true, "fixed-map": isFixed}' :style="{left: ml + 'px'}">
        <div class="map-head">地图预览</div>
        <div class="amap" id="container"></div>
        <div class="map-geo" @click="getGeoLoc">
          <img src="https://a.amap.com/jsapi/static/image/plugin/waite.png" v-show="loading">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/amap.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=ddd292c88aa1bad9c04891a47724f40a"></script>


<script>
  // 设置后台服务地址
  axios.defaults.baseURL = "http://localhost:8089";
  axios.defaults.timeout = 3000;

  let app = new Vue({
    el: "#app",
    data: {
      isTest: false,
      filterNames: {
        brand: "品牌",
        city: "城市",
        starName: "星级",
        price: "价格",
      },
      filterList: {},// 过滤项的假数据
      sortItems: [
        {
          key: "default",
          text: "默认",
        },
        {
          key: "score",
          text: "评价",
        },
        {
          key: "price",
          text: "价格",
        }
      ],// 排序字段的假数据
      hotels: [],// 酒店数据
      total: 0, // 总条数
      totalPage: 0, // 总页数
      params: {
        key: "", // 搜索关键字
        page: 1, // 当前页码
        size: 5, // 每页大小
        sortBy: "default",// 排序字段
        filters: {}, // 过滤字段
      },
      map: {},// 地图对象
      loc: "", // 地图标记
      ml: 0, // 控制地图位置
      geolocation:{}, // 定位系统
      loading: false, // 是否在定位
      currentHotel: {},
      ops: [],
      showOps: false,
      opsIndex: -1,
      isFixed: false,
      testFilterData: {
        "city": ["上海", "北京", "深圳", "杭州"],
        "starName": ["四星","五星","二钻","三钻","四钻","五钻"],
        "brand": ["7天酒店",  "如家","速8", "皇冠假日","华美达","万怡","喜来登","万豪","和颐","希尔顿"],
      },
    },
    watch: {
      "params.sortBy"() {
        // 每当page改变，当前代码就会执行。搜索一下
        this.search(this.loc);
      },
      "params.page"() {
        // 每当page改变，当前代码就会执行。搜索一下
        this.search(this.loc);
      },
      "params.filters": {
        deep: true,
        handler() {
          if(this.params.page === 1){
            this.search();
            // 获取过滤项
            this.getFilter();
          } else{
            this.params.page = 1;
            this.getFilter();
          }

        }
      },
      opsIndex() {
        if (this.opsIndex !== -1) {
          this.params.key = this.ops[this.opsIndex]
        }
      }
    },
    created() {
      // 页面加载时，先搜索一下
      this.search();
      // 获取过滤项
      this.getFilter();
    },
    mounted() {
      //初始化地图
      this.map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 11, //初始地图级别
        center: [120.0, 32.0], //初始地图中心点
      });
      // 初始化定位系统
      AMap.plugin('AMap.Geolocation', () => {
        this.geolocation = new AMap.Geolocation({
          position: 'RT',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
        });

        // AMap.Event.addListener(geolocation, 'complete', result => {
        //   if (this.params.page !== 1) {
        //     this.params.page = 1;
        //     this.loc = result.position.lat + ", " + result.position.lng;
        //   } else {
        //     this.searchByMap(result.position.lat + ", " + result.position.lng);
        //   }
        //
        // });//返回定位信息
        // AMap.Event.addListener(geolocation, 'error', err => console.log(err));      //返回定位出错信息
      });

      let oDiv = document.querySelector(".map-box"),
        H = 0,
        Y = oDiv;
      while (Y) {
        H += Y.offsetTop;
        Y = Y.offsetParent;
      }
      window.addEventListener('scroll', () => this.handleScroll(H, oDiv));
    },
    methods: {
      handleScroll(h, o) {
        let s = document.body.scrollTop || document.documentElement.scrollTop
        this.isFixed = s > h;
        this.ml = o.offsetLeft;
      },
      handleKeyUp(e) {
        if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {
          // 用户输入的字符，需要自动补全
          this.getSuggestion();
        } else if (e.keyCode === 13) {
          // 用户按回车，需要搜索
          this.search();
          this.getFilter();
        } else if (e.keyCode === 38) {
          if (this.opsIndex > 0) {
            this.opsIndex--;
          } else {
            this.opsIndex = this.ops.length - 1;
          }
        } else if (e.keyCode === 40) {
          this.opsIndex = (this.opsIndex + 1) % this.ops.length;
        } else if (e.keyCode === 27) {
          this.show = false
        }
      },
      handleSearch(){
        this.search();
        this.getFilter();
      },
      getSuggestion() { // 查询自动补全
        if (!this.params.key) {
          // key没有值，不去搜索了
          this.ops = [];
          return;
        }
        axios.get("/hotel/suggestion?key=" + this.params.key)
          .then(resp => {
            this.ops = resp.data;
          })
          .catch(e => {
            if(this.isTest){
              this.ops = ["万豪", "如家", "喜来登"]
            }else{
              this.ops = []
            }
            console.log(e);
          })
      },
      getFilter() {
        if(this.isTest){
          this.filterList = this.testFilterData;
          return;
        }
        // 准备参数
        const {filters: {price: ps, ... fs}, ...params} = this.params;
        for( _k in fs){
          params[_k] = fs[_k];
        }
        // 处理价格
        if(ps){
          let pArr = ps.split("-");
          params.minPrice = parseInt(pArr[0]);
          let max = parseInt(pArr[1]);
          params.maxPrice = max === 0 ? 999999 : max;
        }
        axios.post("/hotel/filters", params)
          .then(resp => {
            this.filterList = resp.data;
          })
          .catch(err => {
            console.log(err);
            this.filterList = this.testFilterData;
          })
      },
      searchByMap(location) {
        // 准备参数
        const {filters: {price: ps, ... fs}, ...params} = this.params;
        for( _k in fs){
          params[_k] = fs[_k];
        }
        // 处理价格
        if(ps){
          let pArr = ps.split("-");
          params.minPrice = parseInt(pArr[0]);
          let max = parseInt(pArr[1]);
          params.maxPrice = max === 0 ? 999999 : max;
        }

        // 准备地址
        if (location) {
          params.location = location;
          this.loc = location;
        }

        axios.post("/hotel/list", params)
          .then(resp => {
            this.hotels = resp.data.hotels;
            this.total = resp.data.total;
            this.totalPage = Math.floor((this.total + 5 - 1) / 5);
            if (location) {
              this.setMapCenter(location);
            } else if(this.hotels && this.hotels.length > 0){
              this.setMapCenter(this.hotels[0].location);
            }
            this.initMarker();
          })
          .catch(err => {
            console.log(err)
            this.hotels = [{"id":60223,"name":"上海希尔顿酒店","address":"静安华山路250号","price":2688,"score":37,"brand":"希尔顿","city":"上海","starName":"五星级","business":"静安寺地区","location":"31.219306, 121.445427","pic":"https://m.tuniucdn.com/filebroker/cdn/res/92/10/9210e74442aceceaf6e196d61fc3b6b1_w200_h200_c1_t0.jpg"},{"id":60922,"name":"上海虹桥祥源希尔顿酒店","address":"红松东路1116号","price":1108,"score":45,"brand":"希尔顿","city":"上海","starName":"五钻","business":"虹桥地区","location":"31.18746, 121.395312","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/tQRqDTFkHnHzMZiDKjcGV81ekvc_w200_h200_c1_t0.jpg"},{"id":309208,"name":"北京王府井希尔顿酒店","address":"王府井东街8号","price":1679,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"天安门/王府井地区","location":"39.914539, 116.413392","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/52/10/Cii-TF3ePt2IX9UEAALb6VYBSmoAAGKMgGsuW8AAtwB147_w200_h200_c1_t0.jpg"},{"id":395434,"name":"北京希尔顿酒店","address":"东三环北路东方路1号","price":350,"score":45,"brand":"希尔顿","city":"北京","starName":"五星级","business":"燕莎/朝阳公园商业区","location":"39.952703, 116.462387","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/3fwNbKGhk6XCrkdVyxwhC5uGpLVy_w200_h200_c1_t0.jpg"},{"id":395702,"name":"北京首都机场希尔顿酒店","address":"首都机场3号航站楼三经路1号","price":222,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"首都机场/新国展地区","location":"40.048969, 116.619566","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/52/10/Cii-U13ePtuIMRSjAAFZ58NGQrMAAGKMgADZ1QAAVn_167_w200_h200_c1_t0.jpg"},{"id":615175,"name":"千岛湖滨江希尔顿度假酒店","address":"环湖北路600号","price":1265,"score":47,"brand":"希尔顿","city":"杭州","starName":"五钻","business":"千岛湖镇","location":"29.603634, 119.077596","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/6qzYeUrrXsH5H3cd9bMXLz8MJtT_w200_h200_c1_t0.jpg"},{"id":2351601,"name":"深圳蛇口希尔顿南海酒店","address":"望海路1177号","price":509,"score":47,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"深圳湾口岸/蛇口","location":"22.479373, 113.916013","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/45/EA/Cii-TF3ZpXOIfa6fAAJjiUOiuYgAAFrtgDtgpQAAmOh799_w200_h200_c1_t0.jpg"},{"id":368701368,"name":"深圳大中华希尔顿酒店","address":"福田深南大道1003号","price":1666,"score":46,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"会展中心/CBD","location":"22.539313, 114.069763","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/4EnHseZ73LXdFJY7DSdJ8xqAcjXe_w200_h200_c1_t0.jpg"},{"id":2048042240,"name":"北京大兴希尔顿酒店","address":"高米店南里18号楼","price":1283,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"大兴北京新机场地区","location":"39.76875, 116.339199","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/3B32F8zSU2CJCWzs1hoH2o4WcquR_w200_h200_c1_t0.jpg"},{"id":2056105938,"name":"北京通州北投希尔顿酒店","address":"新华东街289号2号楼","price":1068,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"果园环岛/通州区","location":"39.908805, 116.659748","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/NGKdpec3tZJNUUNWJ5pd67Cp5AY_w200_h200_c1_t0.png"}]
            this.total = 271;
            this.totalPage = 28;
          })
      },
      search(location) {
        // 发送ajax
        this.searchByMap(location);

      },
      prePage() {
        if (this.params.page > 1) {
          this.params.page--
        }
      },
      nextPage() {
        if (this.params.page < this.totalPage) {
          this.params.page++
        }
      },
      clickPrice(min, max) {
        this.params.minPrice = min;
        this.params.maxPrice = max;
      },
      clickFilter(key, option) {
        this.loc = "";
        const {...obj} = this.params.filters;
        obj[key] = option;
        this.params.filters = obj;
      },
      deleteFilter(k) {
        this.loc = "";
        const {...obj} = this.params.filters;
        delete obj[k];
        this.params.filters = obj;
      },
      location(loc) {
        let arr = loc.split(", ");
        let json = '[' + arr[1] + ', ' + arr[0] + ']'
        return JSON.parse(json);
      },
      initMarker() {
        if (!this.loc) {
          this.map.clearMap();
        }
        this.markHotels();
      },
      setMapCenter(location){
        this.map.setCenter(this.location(location));
      },
      markHotels(){
        this.hotels.forEach((h, i) => {
          // 将创建的点标记添加到已有的地图实例：
          let marker = new AMap.Marker({
            position: this.location(h.location),   // 经纬度构成的一维数组[116.39, 39.9]
            title: h.name,
            offset: new AMap.Pixel(0, 0),
            anchor:'bottom-center'
          });
          marker.vid = h.id;
          this.map.add(marker);
        });
      },
      handleMarkerFocus(h) {
        this.map.setCenter(this.location(h.location));
        let old = this.currentHotel;
        let oldMarker = this.map.getAllOverlays("marker").find(m => m.vid === old.id);
        if (oldMarker) {
          this.updateMarker(oldMarker, "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", "", this.location(old.location), old.id);
        }

        this.currentHotel = h;
        let marker = this.map.getAllOverlays("marker").find(m => m.vid === h.id);
        this.updateMarker(marker, "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", h.name, this.location(h.location), h.id);
      },
      updateMarker(marker, icon, text, position, id) {
        // 自定义点标记内容
        var markerContent = document.createElement("div");

        // 点标记中的图标
        var markerImg = document.createElement("img");
        markerImg.className = "markerlnglat";
        markerImg.src = icon;
        markerImg.setAttribute('width', '25px');
        markerImg.setAttribute('height', '34px');
        markerContent.appendChild(markerImg);

        // 点标记中的文本
        if (text) {
          var markerSpan = document.createElement("span");
          markerSpan.className = 'marker';
          markerSpan.innerHTML = text;
          markerContent.appendChild(markerSpan);
        }

        marker.setContent(markerContent);
        marker.setPosition(position);
        marker.vid = id;
      },
      getGeoLoc(){
        this.loading = true;
        this.geolocation.getCurrentPosition((status,result) => {
          this.loading = false;
          if(status === 'complete'){
            console.log("successs")
            // https://a.amap.com/jsapi/static/image/plugin/point.png
            this.addMaker('//a.amap.com/jsapi/static/image/plugin/point.png', result.position.lng,result.position.lat);
            if (this.params.page !== 1) {
              this.params.page = 1;
              this.loc = result.position.lat + ", " + result.position.lng;
            } else {
              this.searchByMap(result.position.lat + ", " + result.position.lng);
            }
          }else{
            console.log("err", status)
          }
        });
      },
      addMaker(iconUrl, lng, lat){
        // 创建 AMap.Icon 实例：
        let icon = new AMap.Icon({
          size: new AMap.Size(25, 25),    // 图标尺寸
          image: iconUrl,  // Icon的图像
          imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
        });

        // 将 Icon 实例添加到 marker 上:
        let marker = new AMap.Marker({
          position: new AMap.LngLat(lng, lat),
          offset: new AMap.Pixel(0, 0),
          icon: icon, // 添加 Icon 实例
          title: '北京',
          zoom: 13,
          anchor:"center"
        });
        this.map.add(marker);
      }
    },
    computed: {
      remainFilter() {
        let keys = Object.keys(this.params.filters);
        let obj = {};
        Object.keys(this.filterList).forEach(key => {
          if (!keys.includes(key) && this.filterList[key].length > 1) {
            obj[key] = this.filterList[key];
          }
        })
        return obj;
      }
    }
  })
</script>
</body>

</html>